<template>
  <div class="largeScreen">
    <!-- <div class="notic-bar" v-show="flag">
      <img src="@/assets/images/screenInform.png" class="notice-img" />
      <div class="notice-bar-container">
        <div class="notice-bar__wrap">
          <div class="notice-bar__wrap_text">
            {{ noticeContent }}
          </div>
        </div>
      </div>
    </div> -->
    <div class="header">
      <div class="weatherContent">
        <div>{{ weatcherData.city }}</div>
        <div>{{ weatcherData.weather }}</div>
        <div class="temperatureData">
          {{ weatcherData.temperature }}<span>°</span>
        </div>
      </div>
      <div class="title">车辆预约管理系统</div>
      <div class="reportTime">{{ currentTime }}</div>
    </div>
    <div class="line"></div>
    <div class="content">
      <div class="content-top">
        <div class="content-top-left">
          <dv-border-box-8>
            <div class="content-top-left-title arcTitle1">待审单车辆</div>
            <div class="scroll_table">
              <div style="display: inline-block; width: 100%">
                <el-table
                  :data="pendingtableList"
                  class="table"
                  :cell-style="{ color: '#fff' }"
                  :header-cell-style="{
                    color: '#F79F1F',
                    textAlign: 'center',
                    fontSize: '36px',
                  }"
                >
                  <el-table-column label="排序" width="100">
                    <template slot-scope="scope">
                      <span>{{ scope.$index + 1 }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    v-for="(item, index) in columns"
                    :key="index + 'i'"
                    :label="item.label"
                    :prop="item.prop"
                    :width="item.minWidth"
                  />
                </el-table>
                <div
                  v-if="
                    pendingtableList.length < 12 ||
                    pendingtableList.length == 12
                  "
                >
                  <el-table
                    :data="pendingtableList"
                    class="table_scroll pendingTable pendingHeader"
                  >
                    <el-table-column label="排序" width="100">
                      <template slot-scope="scope">
                        <span>{{ scope.$index + 1 }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      v-for="(item, index) in columns"
                      :key="index + 'i'"
                      :label="item.label"
                      :prop="item.prop"
                      :width="item.minWidth"
                    />
                  </el-table>
                </div>
                <div v-if="pendingtableList.length > 12">
                  <vue-seamless-scroll
                    :data="pendingtableList"
                    class="seamless-warp"
                    style="width: 100%"
                    :class-option="classOption"
                  >
                    <el-table
                      :data="pendingtableList"
                      class="table_scroll pendingTable"
                    >
                      <el-table-column label="排序" width="100">
                        <template slot-scope="scope">
                          <span>{{ scope.$index + 1 }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column
                        v-for="(item, index) in columns"
                        :key="index + 'i'"
                        :label="item.label"
                        :prop="item.prop"
                        :width="item.minWidth"
                      />
                    </el-table>
                  </vue-seamless-scroll>
                </div>
              </div>
            </div>
          </dv-border-box-8>
        </div>
      </div>
      <div class="content-center">
        <!-- <div class="content-bottom-center">
          <dv-border-box-10>
            <div class="content-bottom-left-title arcTitle">月台分配情况</div>
            <div class="platforminfo">
              <liquidItem1 />
              <liquidItem2 />
              <liquidItem3 />
            </div>
          </dv-border-box-10>
        </div> -->
        <div class="content-bottom-left">
          <dv-border-box-10>
            <div class="predisBox">
              <div class="content-bottom-left-title arcTitle2">预分配车辆</div>
              <div class="scroll_table">
                <div style="display: inline-block; width: 100%">
                  <el-table
                    :data="predistableList"
                    class="table"
                    :cell-style="{ color: '#fff' }"
                    :header-cell-style="{
                      color: '#12ec7f',
                      textAlign: 'center',
                      fontSize: '36px',
                    }"
                  >
                    <el-table-column label="排序" width="100">
                      <template slot-scope="scope">
                        <span>{{ scope.$index + 1 }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      v-for="(item, index) in columns"
                      :key="index + 'i'"
                      :label="item.label"
                      :prop="item.prop"
                      :width="item.minWidth"
                    />
                  </el-table>
                  <div
                    v-if="
                      predistableList.length < 5 || predistableList.length == 5
                    "
                  >
                    <el-table
                      :data="predistableList"
                      class="table_scroll allocatedtable predisHeader"
                    >
                      <el-table-column label="排序" width="100">
                        <template slot-scope="scope">
                          <span>{{ scope.$index + 1 }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column
                        v-for="(item, index) in columns"
                        :key="index + 'i'"
                        :label="item.label"
                        :prop="item.prop"
                        :width="item.minWidth"
                      />
                    </el-table>
                  </div>
                  <div v-if="predistableList.length > 5">
                    <vue-seamless-scroll
                      :data="predistableList"
                      class="preseamless-warp"
                      style="width: 100%"
                      :class-option="classOption"
                    >
                      <el-table
                        :data="predistableList"
                        class="table_scroll allocatedtable"
                      >
                        <el-table-column label="排序" width="100">
                          <template slot-scope="scope">
                            <span>{{ scope.$index + 1 }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column
                          v-for="(item, index) in columns"
                          :key="index + 'i'"
                          :label="item.label"
                          :prop="item.prop"
                          :width="item.minWidth"
                        />
                      </el-table>
                    </vue-seamless-scroll>
                  </div>
                </div>
              </div>
            </div>
            <div class="qcode">
              <div class="arcTitle2 qcodeTitle textbox">签到二维码</div>
              <div class="imgqrcode">
                <img v-bind:src="qrcodeUrl" height="100%" />
              </div>
              <div class="arcTitle2 countdown">
                剩余
                <div class="minuteData">{{ secondsLeft }}</div>
                秒失效
              </div>
            </div>
          </dv-border-box-10>
        </div>
      </div>
      <div class="content-bottom">
        <div class="content-top-right">
          <dv-border-box-8 :reverse="true">
            <div class="content-top-left-title arcTitle3">已分配车辆</div>
            <div class="scroll_table">
              <div style="display: inline-block; width: 100%">
                <el-table
                  :data="allocatedtableList"
                  class="table predistable"
                  :cell-style="{ color: '#fff' }"
                  :header-cell-style="{
                    color: '#fed330',
                    textAlign: 'center',
                    fontSize: '36px',
                  }"
                >
                  <!-- <el-table-column label="排序" width="90">
                    <template slot-scope="scope">
                      <span>{{ scope.$index + 1 }}</span>
                    </template>
                  </el-table-column> -->
                  <el-table-column
                    v-for="(item, index) in allocatedcolumns"
                    :key="index + 'i'"
                    :label="item.label"
                    :prop="item.prop"
                    :width="item.minWidth"
                  />
                </el-table>
                <div
                  v-if="
                    allocatedtableList.length < 12 ||
                    allocatedtableList.length == 12
                  "
                >
                  <el-table
                    :data="allocatedtableList"
                    class="table_scroll predistable allocatedHeader"
                  >
                    <!-- <el-table-column label="排序" width="90">
                      <template slot-scope="scope">
                        <span>{{ scope.$index + 1 }}</span>
                      </template>
                    </el-table-column> -->
                    <el-table-column
                      v-for="(item, index) in allocatedcolumns"
                      :key="index + 'i'"
                      :label="item.label"
                      :prop="item.prop"
                      :width="item.minWidth"
                    />
                  </el-table>
                </div>
                <div v-if="allocatedtableList.length > 12">
                  <vue-seamless-scroll
                    :data="allocatedtableList"
                    class="seamless-warp"
                    style="width: 100%"
                    :class-option="classOption"
                  >
                    <el-table
                      :data="allocatedtableList"
                      class="table_scroll predistable"
                    >
                      <el-table-column label="排序" width="90">
                        <template slot-scope="scope">
                          <span>{{ scope.$index + 1 }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column
                        v-for="(item, index) in allocatedcolumns"
                        :key="index + 'i'"
                        :label="item.label"
                        :prop="item.prop"
                        :width="item.minWidth"
                      />
                    </el-table>
                  </vue-seamless-scroll>
                </div>
              </div>
            </div>
          </dv-border-box-8>
        </div>
      </div>
    </div>
    <div class="notic-bar" v-show="flag">
      <img src="@/assets/images/screenInform.png" class="notice-img" />
      <div class="notice-bar-container">
        <div class="notice-bar__wrap">
          <div class="notice-bar__wrap_text">
            {{ noticeContent }}
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- <div class="ad">
      <img src="@/assets/images/srceenbg.png" id="adImg" alt="" />
    </div> -->
</template>

<script>
import { getSelectReservationDp, coachQRCodelist } from "@/api/login";
import { getScreenNotice } from "@/api/system/screen";
import { weatherInfo } from "@/api/system/weather";
import liquidItem1 from "@/components/largeEcharts/liquidItem1";
import liquidItem2 from "@/components/largeEcharts/liquidItem2";
import liquidItem3 from "@/components/largeEcharts/liquidItem3";
export default {
  components: {
    liquidItem1,
    liquidItem2,
    liquidItem3,
  },
  data() {
    return {
      allocatedcolumns: [
        {
          prop: "reservationNum",
          label: "月台",
          minWidth: "100",
          sort: true,
        },
        { prop: "carNumber", label: "车牌号", minWidth: "220", sort: true },
        // { prop: "phone", label: "手机号", minWidth: "150", sort: true },

        { prop: "consignee", label: "收货人", minWidth: "130", sort: true },
        { prop: "hs", label: "耗时", minWidth: "135", sort: true },
      ],
      columns: [
        { prop: "carNumber", label: "车牌号", minWidth: "210", sort: true },
        { prop: "driverName", label: "司机", minWidth: "135", sort: true },
        // { prop: "phone", label: "手机号", minWidth: "150", sort: true },
        // { prop: "sendOrder", label: "单数", minWidth: "100", sort: true },
        { prop: "sendCount", label: "件数", minWidth: "140", sort: true },
      ],
      notSignintableList: [],
      pendingtableList: [],
      // 预分配
      predistableList: [],
      // 已分配
      allocatedtableList: [],
      timer: null,
      weatcherData: {
        adcode: "",
        city: "",
        humidity: "",
        info: "",
        province: "",
        reportTime: "",
        temperature: 0,
        weather: "",
        windDirection: "",
        windPower: "",
      },
      currentTime: this.getCurrentTime(),
      qrcodeUrl: "",
      // 倒计时
      secondsLeft: null,
      // 大屏公告内容
      noticeContent: "",
      flag: null,
      outTime: null,
    };
  },
  computed: {
    classOption() {
      return {
        step: 1, // 数值越大速度滚动越快
        limitMoveNum: this.notSignintableList.length, // 开始无缝滚动的数据量 this.tableList
        limitMoveNum: this.pendingtableList.length, // 开始无缝滚动的数据量 this.tableList
        limitMoveNum: this.predistableList.length, // 开始无缝滚动的数据量 this.tableList
        limitMoveNum: this.allocatedtableList.length, // 开始无缝滚动的数据量 this.tableList
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  created() {
    setInterval(() => {
      this.currentTime = this.getCurrentTime();
    }, 1000);
    this.getcoachQRCode();
  },
  mounted() {
    this.getresetList();
    this.getNotice();
    this.startRefresh();
    this.getCity();

    // this.params();
  },
  beforeDestroy() {
    this.stopRefresh();
  },
  methods: {
    getNotice() {
      getScreenNotice().then((res) => {
        if (res.data) {
          this.flag = true;
          this.noticeContent = res.data.content;
        } else {
          this.flag = false;
        }
      });
    },
    // params() {
    //   let count = 11; //速度
    //   // let count = 500         //速度
    //   let stepX = 1;
    //   let stepY = 1;
    //   let img = document.getElementById("adImg");
    //   let imgWidth = img.offsetWidth;
    //   let imgHeight = img.offsetHeight;
    //   let clientw = document.body.clientWidth; //1903（不包含滚动条）
    //   let clienth = document.body.clientHeight; //866（不包含工具条）
    //   let x = parseInt(img.getBoundingClientRect().left);
    //   let y = parseInt(img.getBoundingClientRect().top);
    //   setInterval(() => {
    //     let distenceX = clientw - x;
    //     let distenceY = clienth - y;
    //     if (distenceX - imgWidth < 0 || distenceX > clientw) {
    //       stepX = -stepX;
    //     }
    //     if (distenceY - imgHeight < 0 || distenceY > clienth) {
    //       stepY = -stepY;
    //     }
    //     x += stepX;
    //     y += stepY;
    //     this.changePos(img, x, y);
    //   }, count);
    // },
    // changePos(img, x, y) {
    //   img.style.left = x + "px";
    //   img.style.top = y + "px";
    // },
    startCountdown() {
      this.secondsLeft = 120;
      const countdownInterval = setInterval(() => {
        this.secondsLeft--;
        if (this.secondsLeft == 0) {
          clearInterval(countdownInterval);
          this.getcoachQRCode(); // 重新调用接口获取新的二维码
        }
      }, 1000);
    },
    getcoachQRCode() {
      coachQRCodelist().then((res) => {
        const blob = new Blob([res], { type: "image/png" });
        const imageUrl = URL.createObjectURL(blob);
        this.qrcodeUrl = imageUrl;
        this.startCountdown();
      });
    },
    // 获取重置列表
    getresetList() {
      resetList().then((res) => {
        this.notSignintableList = res.data.notSignintable;
        this.pendingtableList = res.data.pending;
        this.predistableList = res.data.predistable;
        this.allocatedtableList = res.data.allocated;
      });
    },
    getCurrentTime() {
      const currentDate = new Date();
      const year = currentDate.getFullYear(); // 获取当前年份
      const month = currentDate.getMonth() + 1; // 获取当前月份（注意月份是从0开始计数的，需要加1）
      const day = currentDate.getDate(); // 获取当前日期
      // const datePart = currentDate.toLocaleDateString();
      const timePart = currentDate.toLocaleTimeString();
      // const dateTimeString = `${datePart} ${timePart}`;
      const dateTimeString = `${year}/${month}/${day} ${timePart}`;
      return dateTimeString;
    },
    // 获取天气信息
    // getWeatherInfo() {
    //   weatherInfo().then((res) => {
    //     console.log(res, "天气信息");
    //     this.weatcherData = res.data;
    //   });
    // },
    // 天气信息
    getCity() {
      let that = this;
      let city = null;
      AMap.plugin("AMap.CitySearch", function () {
        var citySearch = new AMap.CitySearch();
        citySearch.getLocalCity(function (status, result) {
          if (status === "complete" && result.info === "OK") {
            console.log(result, "城市信息");
            that.getWeather(result.city);
          }
        });
      });
    },
    // 获取天气
    getWeather(city) {
      let that = this;
      //加载天气查询插件
      AMap.plugin("AMap.Weather", function () {
        //创建天气查询实例
        let weather = new AMap.Weather();
        //执行实时天气信息查询
        weather.getLive(city, function (err, data) {
          console.log(err, data);
          if (data.info == "OK") {
            that.weatcherData = data;
            console.log(that.weatcherData, "天气");
          }
        });
      });
    },
    getresetList() {
      getSelectReservationDp({ reservationStatus: "0" }).then((response) => {
        this.notSignintableList = response.data;
      });
      getSelectReservationDp({ reservationStatus: "1" }).then((response) => {
        this.pendingtableList = response.data;
      });
      getSelectReservationDp({ reservationStatus: "3" }).then((response) => {
        this.predistableList = response.data;
      });
      getSelectReservationDp({ reservationStatus: "4" }).then((response) => {
        this.allocatedtableList = response.data;
      });
    },
    startRefresh() {
      this.timer = setInterval(() => {
        this.getresetList();
      }, 30000);
      this.outTime = setInterval(() => {
        this.getNotice();
      }, 120000);
    },
    stopRefresh() {
      clearInterval(this.timer);
      clearInterval(this.outTime);
    },
  },
};
</script>

<style lang="scss" scoped>
.scroll_table {
  margin: 0 15px;
  display: flex;
  ::v-deep .table .el-table__body-wrapper {
    display: none;
  }
  // 重点注意这段样式
  .seamless-warp {
    height: 850px;
    overflow: hidden;
    ::v-deep .table_scroll .el-table__header-wrapper {
      display: none;
    }
  }
  .preseamless-warp {
    height: 460px;
    overflow: hidden;
    ::v-deep .table_scroll .el-table__header-wrapper {
      display: none;
    }
  }
  ::v-deep .predisHeader .el-table__header-wrapper {
    display: none;
  }
  ::v-deep .pendingHeader .el-table__header-wrapper {
    display: none;
  }
  ::v-deep .allocatedHeader .el-table__header-wrapper {
    display: none;
  }
  //   预分配
  // .preseamless-warp{
  //     height: 100px;
  //     overflow: hidden;
  //     ::v-deep .table_scroll .el-table__header-wrapper {
  //       display: none;
  //     }
  // }
  /*最外层透明*/
  ::v-deep .el-table,
  ::v-deep .el-table__expanded-cell {
    background-color: transparent !important;
  }
  /* 表格内背景颜色 */
  ::v-deep .el-table th,
  ::v-deep .el-table tr,
  ::v-deep .el-table td {
    background-color: transparent !important;
  }
  ::v-deep .el-table td.el-table__cell {
    // color: #fff;
    // color: #00fff2;
    text-align: center;
    font-weight: 700;
    font-size: 36px;
    height: 70px;
  }
  .pendingTable {
    // color: #00fff7 !important;
    // color: #f79f1f !important;
    color: #fff !important;

    // text-align: center;
    // font-weight: 700;
    // font-size: 34px;
    // height: 70px;
  }
  .predistable {
    // color: #fed330 !important;
    color: #fff !important;
  }
  .allocatedtable {
    // color: #12ec7f !important;
    color: #fff !important;
  }
  ::v-deep .el-table .cell {
    height: 34px;
    line-height: 34px;
  }
}
// .largeContent {
//   position: relative;
// }
// .ad {
//   img {
//     position: absolute;
//     z-index: 999;
//     left: 0px;
//     top: 50px;
//     width: 30%;
//   }
// }
.largeScreen {
  width: 100%;
  height: 1100px;
  //   background: #161538;
  background: #241fa3;
  // position: absolute;
  // top: 0;
  // left: 0;
  overflow: hidden;
  .notic-bar {
    display: flex;
    margin-top: -10px;
    // background: #67c23a;
    // background: #ffffff;
    // margin: 5px;
    // border-radius: 5px;
    padding: 0px 5px;
  }
  .notice-bar-container {
    display: flex;
    width: calc(100% - 30px);
    height: 30px;
    overflow: hidden;
    margin-left: 5px;
  }
  .notice-img {
    width: 20px;
    height: 20px;
  }
  .notice-bar__wrap {
    margin-left: 10px;
    display: flex;
    animation: move 20s linear infinite;
    line-height: 30px;
    color: #fed330;

    .notice-bar__wrap_text {
      width: max-content;
      min-width: 100px;
      font-size: 26px;
    }
  }
  @keyframes move {
    0% {
      // transform: translateX(0);
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }
  .header {
    height: 100px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: -16px;
    color: #ffffff;
    padding: 0 10px 0 40px;
    background: url("../assets/images/largeScreen/header.png") center center
      no-repeat;
    background-size: 100%;
    .weatherContent {
      color: #fff;
      font-size: 30px;
      width: 260px;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
    }
    .title {
      z-index: 1;
      font-size: 34px;
    }
    .reportTime {
      text-align: center;
      width: 300px;
      font-size: 30px;
      color: #fff;
    }
  }
  .line {
    height: 30px;
    width: 100%;
    background: url("../assets/images/largeScreen/line.png") center center
      no-repeat;
  }
  .content {
    width: 100%;
    // height: 1000px;
    height: 940px;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    // .arcTitle {
    //   display: flex;
    //   justify-content: center;
    //   align-items: center;
    //   // color: #00a8ff;
    //   color: #fff;
    //   //   text-shadow: #004aac 5px 4px 8px;
    //   font-size: 30px;
    //   height: 40px;
    //   font-weight: 700;
    //   line-height: 40px;
    // }
    .arcTitle1 {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #f79f1f;
      // color: #00fff2;
      //   text-shadow: #004aac 5px 4px 8px;
      font-size: 30px;
      height: 40px;
      font-weight: 700;
      line-height: 40px;
    }
    .arcTitle2 {
      display: flex;
      justify-content: center;
      align-items: center;
      // color: #00a8ff;
      color: #12ec7f;
      //   text-shadow: #004aac 5px 4px 8px;
      font-size: 30px;
      height: 40px;
      font-weight: 700;
      line-height: 40px;
    }
    .arcTitle3 {
      display: flex;
      justify-content: center;
      align-items: center;
      // color: #00a8ff;
      color: #fed330;
      //   text-shadow: #004aac 5px 4px 8px;
      font-size: 30px;
      height: 40px;
      font-weight: 700;
      line-height: 40px;
    }
    .content-top {
      width: 33%;
      height: 100%;
      .content-top-left {
        height: 98%;
        // border: 1px solid transparent; /* 设置透明边框 */
        // border-image: linear-gradient(
        //   to right,
        //   #20c5ff,
        //   #bbebff
        // ); /* 使用线性渐变作为边框图像 */
        // border-image-slice: 1; /* 设置边框图像的平铺区域大小 */
        .content-top-left-title {
          width: 100%;
          height: 40px;
          background: url("../assets/images/largeScreen/signIn.png") center
            center no-repeat;
          background-size: 180%;
        }
      }
    }
    .content-center {
      width: 33%;
      height: 100%;
      .content-bottom-left {
        // margin-top: 2%;
        height: 98%;
        .predisBox {
          // height: 60%;
          height: 60%;
        }
        .qcode {
          height: 40%;
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-top: 1px solid #85837d;
          padding: 30px;
          .qcodeTitle {
            margin-bottom: 10px;
          }
          .imgqrcode {
            // margin-right: 18%;
            height: 350px;
          }
          .countdown {
            width: 30px;
            height: 400px;
            display: flex;
            flex-direction: column;
            .minuteData {
              color: #fe3030;
            }
          }
          .textbox {
            // margin-left: 10%;
            width: 30px;
            height: 400px;
          }
        }
      }
      .content-bottom-center {
        height: 25%;
        .platforminfo {
          padding: 0 40px;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
      .content-bottom-right {
        margin-top: 2%;
        height: 31%;
      }
    }
    .content-bottom {
      width: 33%;
      height: 100%;
      .content-top-right {
        height: 98%;
        .content-top-left-title {
          width: 100%;
          height: 40px;
          background: url("../assets/images/largeScreen/signIn.png") center
            center no-repeat;
          background-size: 180%;
        }
      }
    }
  }
}
</style>